<template>
  <div id="app">
    <!-- 命名视图: (前提:不是嵌套展示)  => 在一个页面中,对应路由地址,同时展示多个视图
         目的: 在同级文件中,同时展示多个视图  =>  在界面中拥有多个单独命名的视图(可以有一个或多个),如果 router-view 没有设置名字，那么默认为 default。
    
     -->  
     
    <!-- 此视图用于展示头部 -->
    <router-view name="header" />
    <div class="app-main">
      <!-- 视图(默认)  用于展示中间部分主要内容-->
      <router-view name="default" />
    </div>
     <!-- 此视图用于展示footer -->
    <router-view name="footer" />
   
  </div>
</template>

<script>

</script>

<style scoped>
/* 如果不添加scoped => 样式默认是全局的 */
/* 如果添加scoped => 样式只针对当前template生效  => 每一个.vue文件都有一个独特的id(data-v-7ba5bd90),此id会绑定当前template的每一个元素中,如果是组件的话,会透传到组件的根元素 ,
    如果添加了scoped => webpack解析css时,会在每个选择器之后添加属性后缀 */


#app {
  display: flex;
  flex-direction: column;
  align-content: space-between;
}

#app .app-header,
#app .app-footer {
  height: 1rem;
  background-color: grey;
}

#app .app-main {
  overflow-y: auto;
  flex: 1;
}

#app .app-footer {
  display: flex;
  text-align: center;
  line-height: 1rem;
}

#app .app-footer a {
  flex: 1;
}

#app .app-footer ul {
  width: 100%;
  display: flex;
}
#app .app-footer ul li{
  flex:1;
}
/* .router-link-active{
  color: red;
} */

.router-link-exact-active{
  color: red;
}
</style>
